<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>
<body>
<div>首页</div>

<div class="a1">

  <img src="bla.png" style="width: 414px;
height: 100px;">
  <img src="Group.png" style="left:183px;
top: 2px;
opacity: 1;position: relative;">
    <img src="Exclude.png" style="left:30px;
top:50px;width:30px;height:30px;position:relative;">
    <div class="a2">Dhaka, Banassre</div>
    <img src="Search%20.png" style="left: 20px;
top:80px;position:relative;">




    <div id="demo" class="carousel slide" data-ride="carousel">

        <!-- 指示符 -->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
        </ul>

        <!-- 轮播图片 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="banner.png" style="left: 20px;
top:100px;position:relative;width: 370px;height: 270px;">
            </div>
            <div class="carousel-item">
                <img src="香蕉.jpg" style="left: 20px;
top:100px;position:relative;width: 370px;height: 270px;">
            </div>
            <div class="carousel-item">
                <img src="五谷.png" style="left: 20px;
top:100px;position:relative;width: 370px;height: 270px;">
            </div>
        </div>

        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>

    </div>




    <div class="a3">Exclusive Offer</div>
    <div class="a4"> See all</div>
    <div class="a5">
      <img src="香蕉.jpg" style="width: 100px;height: 70px;
left:30px;top:20px;position:relative;">
      <div class="p1">Organic Bananas<div>
        <div class="p2">7pcs,<br>Priceg <div>
          <div class="p3">$4.99<div>
            <img src="Group%206813.png"
                 style="left: 80px;
top:-40px;position:relative;">
    </div>
            <div class="a6">
                <a href="http://localhost:63342/untitled5/%E8%AF%A6%E6%83%85%E9%A1%B5%E9%9D%A2.html?_ijt=2f0d21is13tt0cc423vskog526&_ij_reload=RELOAD_ON_SAVE">
              <img src="pngfuel%201.png" style="width: 100px;height: 70px;
left:30px;top:20px;position:relative;">
                </a>
              <div class="p1">Red Apple<div>
                <div class="p2">1kg,<br>Priceg <div>
                  <div class="p3">$4.99<div>
                    <img src="Group%206813.png"
                         style="left: 80px;
top:-40px;position:relative;">

                  </div>

                    <div class="a7">Best Selling</div>
                    <div class="a8"> See all</div>
<div class="dd1">
                    <div class="a5">
                      <img src="ho.png" style="width: 100px;height: 70px;
left:30px;top:20px;position:relative;">
                      <div class="p1">Bell Pepper Red<div>
                        <div class="p2">1kg,<br>Priceg <div>
                          <div class="p3">$4.99<div>
                            <img src="Group%206813.png"
                                 style="left: 80px;
top:-40px;position:relative;">
                          </div>
                            <div class="a6">
                              <img src="jiang.png" style="width: 100px;height: 70px;
left:30px;top:20px;position:relative;">
                              <div class="p1">Ginger<div>
                                <div class="p2">250gm,<br>Priceg <div>
                                  <div class="p3">$4.99<div>
                                    <img src="Group%206813.png"
                                         style="left: 80px;
top:-40px;position:relative;">

 </div>
 <div class="a7">Groceries</div>
<div class="a8"> See all</div>

 </div>
 <div class="g1">
   <img src="五谷.png" style="left: 20px;top: 15px;
position:relative;">
   <div style="left: 100px;top: -35px;
   font-size: 20px;color: rgba(62, 66, 63, 1);
position:relative;">Pulses</div>
 </div>
  <div class="g2">
    <img src="大米.png" style="left: 20px;top: 15px;
position:relative;">
    <div style="left: 100px;top: -35px;
   font-size: 20px;color: rgba(62, 66, 63, 1);
position:relative;">Rice</div>
  </div>

<div class="s1">
   <div class="a5">
   <img src="333.png" style="width: 100px;height: 70px;
left:30px;top:20px;position:relative;">
   <div class="p1">Beef Bone<div>
    <div class="p2">1kg,<br>Priceg <div>
     <div class="p3">$4.99<div>
       <img src="Group%206813.png"
  style="left: 80px;
top:-40px;position:relative;">
    </div>
  <div class="a6">
   <img src="222.png" style="width: 100px;height: 70px;
left:30px;top:20px;position:relative;">
   <div class="p1">Broiler Chicken<div>
      <div class="p2">1kg,<br>Priceg <div>
<div class="p3">$4.99<div>
  <img src="Group%206813.png"
   style="left: 80px;
top:-40px;position:relative;">
 </div>
</div>
          <p class="pos_fixed">

              <img src="个人主页.png" style="left: 20px;
top:10px;position:relative;">


<a href="http://localhost:63342/untitled5/%E5%88%86%E7%B1%BB.html?_ijt=jp5tqce2i9t96a733qtjle4hk9&_ij_reload=RELOAD_ON_SAVE">
              <img src="搜索标签.png" style="left: 60px;
top:10px;position:relative;">
</a>

              <a href="http://localhost:63342/untitled5/%E8%B4%AD%E7%89%A9%E8%BD%A6.html?_ijt=sd1a7fbs2meamp5s1gu91g6du9&_ij_reload=RELOAD_ON_SAVE">
              <img src="购物车页面.png" style="left: 100px;
top:13px;position:relative;">
              </a>
<a href="http://localhost:63342/untitled5/%E6%94%B6%E8%97%8F%E9%A1%B5.html?_ijt=inh00m55n8t46ej536c81bof20&_ij_reload=RELOAD_ON_SAVE">
              <img src="收藏页面.png" style="left: 140px;
top:14px;position:relative;">
</a>
<a href="http://localhost:63342/untitled5/%E6%88%91%E7%9A%84.html?_ijt=hc00mrilqr707rjk5k5fopp82p&_ij_reload=RELOAD_ON_SAVE">
              <img src="个人主页.png" style="left: 180px;
top:14px;position:relative;">
</a>


          </p>

   </div>


<!--////////////插槽-->
          <template id="my-template">
              <div>
                  <h1><slot name="header"></slot></h1>
                  <p><slot name="content"></slot></p>
                  <footer><slot name="footer"></slot></footer>
              </div>
          </template>






</body>


<script>
    const template = document.getElementById('my-template');
    const clone = template.content.cloneNode(true);

    clone.querySelector('[name="header"]').textContent = 'Hello, World!';
    clone.querySelector('[name="content"]').textContent = 'This is a simple example of using <slot> in HTML.';
    clone.querySelector('[name="footer"]').textContent = 'Goodbye!';

    document.body.appendChild(clone);
</script>




</html>





<style>
    /* Make the image fully responsive */
    .carousel-inner img {
        width: 100%;
        height: 100%;
    }
    p.pos_fixed
    {
        position:fixed;
        top:600px;
        left: 7px;
        width: 408px;
        height: 80px;
        background-color: white;
        border: 1px solid antiquewhite;
    }
  .a1{
    left: -2275.95px;
    top: -824px;
    width: 405px;
    height: 1553px;
    opacity: 1;
    background: rgba(255, 255, 255, 1);
      border: 1px solid antiquewhite;

  }
.a2{
    left: 130px;
    top: 215px;
    width: 180px;
    height: 22px;
    font-size: 24px;
    color: rgba(76, 79, 77, 1);
    position: absolute;

}
.a3{
    left: 20px;
    top: 500px;
    width: 161px;
    height: 29px;
    font-size: 24px;
    color: rgba(24, 23, 37, 1);
    position: absolute;

}
  .a4{
      left: 350px;
      top: 507px;
      width: 50px;
      height: 20px;
      font-size: 16px;
      color: rgba(83, 177, 117, 1);
      position: absolute;

  }
  .a5{
      left: 20px;
      top: 550px;
      width:173px;
      height: 210px;
      border-radius: 20px 20px 20px 20px;
    border: 1px solid antiquewhite;
      background-color: white;
      position: absolute;
  }
  .p1{
    top:100px;
    left: 35px;
    font-size: 16px;
    color: rgba(24, 23, 37, 1);
    position: absolute;
  }
  .p2{
    top:20px;
    left: 0px;
    font-size: 14px;
    position: absolute;
    color: rgba(124, 124, 124, 1);
  }
  .p3{
    top:50px;
    left: 0px;
    font-size: 18px;
    position: absolute;
    color: rgba(24, 23, 37, 1);
  }
  .a6{
    left: 170px;
    top: -170px;
    width:173px;
    height: 210px;
    border-radius: 20px 20px 20px 20px;
    border: 1px solid antiquewhite;
    background-color: white;
    position: absolute;
  }
  .a7{
    left: -245px;
    top: 60px;
    width: 161px;
    height: 29px;
    font-size: 24px;
    color: rgba(24, 23, 37, 1);
    position: absolute;

  }
  .a8{
    left: 80px;
    top: 75px;
    width: 50px;
    height: 20px;
    font-size: 16px;
    color: rgba(83, 177, 117, 1);
    position: absolute;

  }
  .dd1{
    left: -265px;
    top: -430px;
    position: absolute;
  }
  .g1{
    left: -245px;
    top: 160px;
    width: 248px;
    height: 105px;
    opacity: 1;
    background-color: #fcefe3;
    border-radius: 20px 20px 20px 20px;
    position: absolute;
  }
  .g2{
    left: 20px;
    top: 160px;
    width: 135px;
    height: 105px;
    opacity: 1;
    background-color: #E3F1E9FF;
    border-radius: 20px 0 0 20px;
    position: absolute;
  }
  .s1{
    left: -260px;
    top:-255px;
    position: absolute;

  }


</style>
</html>